<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/layui.all.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div id="toolBar" style="display: none">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="doadd"><i class="layui-icon">&#xe608;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dodel"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</div>
<div id="barDemo" style="display: none">
    <a class="layui-btn layui-btn-xs" lay-event="edit"> <i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="respsd"><i class="layui-icon">&#xe673;</i>重置密码</a>
</div>

<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search" >搜索</button>
</div>
<table id="tabledemo" lay-filter="tabledemo">
</table>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script th:inline="none">
    layui.use(['table', 'layer','form'], function () {
        var table = layui.table,
            $=layui.$,
            form=layui.form,
            layer = layui.layer;
        table.render({
            elem: '#tabledemo',
            url: '/sys/userListJson',
            toolbar: '#toolBar',
            page: true
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'username', title: '用户名', width: 150, sort: true}
                , {field: 'nickname', title: '昵称', width: 150}
                , {field: 'telephone', title: '手机号码', width: 130, sort: true}
                , {field: 'age', title: '年龄', width: 110}
                , {field: 'head', title: '头像地址', width: 180}
                , {field: 'locked', title: '是否启用', width: 110}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
            ]]
        });

        table.on('tool(tabledemo)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        type: 2
                        , title: "编辑用户"
                        ,anim: 5   //动画
                        , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: 'tabledemo' +1 //防止重复弹出
                        , area: ['600px', '600px']
                        , content: "/sys/userEdits?id="+data.id  //窗体弹出的请求路径
                        , btn: ['修改', '重置']
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function (index, layero) {
                            const body = layer.getChildFrame('body', index);
                            const iframeWin = window[layero.find('iframe')[0]['name']]//得到iframe页的窗口对象，执行iframe页的方法：
                            const status=iframeWin.document.getElementById("status").value;
                             const Headurl=body.find('input[name=head]').val();
                            // const Headurls="\\img\\"+Headurl.substring(12,Headurl.length)
                            // alert(status)
                            $.post({
                                url:'/sys/userEditsPost', //编辑完提交表单异步提交
                                data:{
                                    'id':data.id,
                                    'username':body.find('input[name=username]').val(),
                                    'nickname':body.find('input[name=nickname]').val(),
                                    'telephone':body.find('input[name=telephone]').val(),
                                    'age':body.find('input[name=age]').val(),
                                    'head':Headurl,
                                    'locked':status
                                },
                                success: function (msg) {
                                    if (msg === "编辑成功") {
                                        layer.msg('编辑成功');
                                        layer.closeAll()
                                        table.reload('tabledemo');
                                    } else {
                                        layer.msg('编辑失败');
                                    }
                                }
                            })
                        }
                        ,btn2: function(index, layero){
                            table.reload("tabledemo")
                        }
                    });
                    break;
                case 'del':
                    layer.confirm('确定删除吗？', function (index) {
                        $.post({
                            url: '/sys/userDeleted',
                            data: {"id": data.id},
                            success: function (msg) {
                                if (msg === "删除成功") {
                                    layer.msg('删除成功');
                                    table.reload('tabledemo');
                                } else {
                                    layer.msg('删除失败');
                                    table.reload('tabledemo');
                                }
                            }
                        })
                        table.reload('tabledemo');

                    });
                    break;
                case 'respsd':
                    layer.confirm('确定重置密码吗(初始密码:123456)？', function (index) {
                        $.post({
                            url: '/sys/userPassword',
                            data: {"id": data.id},
                            success: function (msg) {
                                if (msg === "重置密码成功") {
                                    layer.msg('重置密码成功！');
                                } else {
                                    layer.msg('重置密码失败');
                                }
                            }
                        })
                        table.reload('tabledemo');
                    });
                    break;
            }
        })
        table.on('toolbar(tabledemo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'doadd':
                    layer.open({
                        type: 2
                        , title: "增加用户"
                        ,anim: 3
                        , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: 'tabledemo' + 3 //防止重复弹出
                        , area: ['600px', '600px']
                        , content: "/sys/userAdd"
                        , btn: ['增加', '重置']   //增加 btn1 重置btn2
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function (index, layero) {
                            const body = layer.getChildFrame('body', index);
                            const iframeWin = window[layero.find('iframe')[0]['name']]//得到iframe页的窗口对象，执行iframe页的方法：
                            const status=iframeWin.document.getElementById("status").value;
                            const Headurl=body.find('input[name=head]').val();
                            // const Headurls="\\img\\"+Headurl.substring(12,Headurl.length)
                            $.post({
                                url:'/sys/userListAdd',
                                data:{
                                    'username':body.find('input[name=username]').val(),
                                    'password':body.find('input[name=password]').val(),
                                    'nickname':body.find('input[name=nickname]').val(),
                                    'telephone':body.find('input[name=telephone]').val(),
                                    'age':body.find('input[name=age]').val(),
                                    'head':Headurl,
                                    'locked':status
                                },
                                success: function (msg) {
                                    if (msg === "添加成功") {
                                        layer.msg('添加成功');
                                        layer.closeAll();
                                        table.reload('tabledemo');
                                    }
                                },
                                error:function (){
                                    alert("用户已经被注册请重新输入")
                                }
                            })
                        }
                        ,btn2: function(index, layero){
                            table.reload("tabledemo")
                            layer.closeAll(index);
                        }
                    });
                    break;
                case 'dodel':
                    let UserId = "";
                    if(data.length==0){
                         layer.msg("请选择数据");
                    }
                    if (data.length > 0) {
                        for (const i in data) {
                            UserId += data[i].id+",";
                        }
                        layer.confirm('确定删除吗？', function (index) {
                            $.post({
                                url: '/sys/userBatchDeleted',
                                data: {"ids":UserId},
                                success: function (msg) {
                                    if (msg === "已删除") {
                                        layer.msg('已删除');
                                        table.reload('tabledemo');
                                    } else {
                                        layer.msg('删除失败');
                                        table.reload('tabledemo');
                                    }
                                }
                            })


                        });
                    }
                    table.reload('tabledemo');
                    break;
            }

        })


        $('#search').on('click',function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // 点击获取数据
        var  active = {
            reload: function () {
                var orderId=$('.layui-input').val();
                if (orderId) {
                    var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
                    setTimeout(function(){
                        table.reload('tabledemo', { //表格的id
                            url:'/sys/userListSearch',
                            where: {
                                'orderId':$.trim(orderId)
                            }
                        });
                        layer.close(index);
                    },800);
                } else {
                    layer.msg("请输入ID编号");
                }
            },
        };
    })
</script>

</body>
</html>
</body>
</html>